<template>
    
</template>

<script>
    export default {
        name: "sass-basic"
    }
</script>

<style lang="scss">


    /* 通过选择器继承来精简css*/
    .error {
        border: 1px solid red;
        background-color: #2c3e50;
    }

    .extendClass {
        @extend .error;
        border-width: 3px;
    }

    /* @import：只可以寻找sass文件将其导入 */
    /*@import "rounded-corners", "text-shadow";*/

    /*多重继承，连接继承：继承可以来使用less的extend*/

    /*控制指令*/

    /*  @if：当@if的表达式的返回值不是false或null时，条件成立，输出{}内的代码*/
    $type: monster;
    p {
        @if $type == ocean {
            color: blue;
        } @else if $type == matador {
            color: red;
        } @else if $type == monster {
            color: green;
        } @else {
            color: black;
        }
    }


    /* @for:可以在限制的范围内重复输出格式，每次按（循环输出的变量的值）对样式的结果做出改变。    */


    @for $i from 1 through 3 {
        .item-#{$i} {
            width: 2em * $i;
        }
    }

    //编译为
    .item-1 {
        width: 2em;
    }

    .item-2 {
        width: 4em;
    }

    .item-3 {
        width: 6em;
    }

    /*@each：指令格式：$var in <list> $var可以是任何变量名，比如$length,$name，而 <list> 是一连串的值，也就是值列表。*/
    /*  @each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：*/

    @each $animal in puma, sea-slug, egret, salamander {
        .#{$animal}-icon {
            background-color: #42b983;
        }
    }

    @each $animal, $color, $cursor in (puma, black, default),
            (sea-slug, blue, pointer),
            (egret, white, move) {
        .#{$animal}-icon {
            background-image: url('/images/#{$animal}.png');
            border: 2px solid $color;
            cursor: $cursor;
        }
    }

    /* 混合指令： */
    /*  定义一个混合器   --混合器主要是为了避免重复使用，通过使用参数，把样式中的通用样式抽离出来，*/
    @mixin round-corners {
        border-radius: 5px;
    }

    .notice {
        background-color: #42b983;
        border: 2px solid rebeccapurple;
        @include round-corners;
    }

    /* 混合器不可过度使用，大量的重用会导致生成的样式表过大，导致加载缓慢*/
    /*    何时使用混合器：是否可以为这一组属性找到一个辨识度比较高的名字，便于向用户展示这部分内容的主要用途*/

    /*混合器中不仅可以包含属性，还可以包含css规则，如何使用呢*/

    @mixin no-bullets {
        list-style: none;
        li {
            list-style-image: none;

        }
    }

    ul.plain {
        color: #2c3e50;
        @include no-bullets;
    }


    /*最终css代码这样*/
    ul.plain {
        color: #2c3e50;
        list-style: none;
    }

    ul.plain li {
        list-style-image: none;
    }

    /*给混合器传参数*/
    @mixin link-colors($nomal,$hover,$visited) {
        color: #42b983;
        &:hover {
            color: $hover;
        }
        &:visited {
            color: $visited;
        }
    }

    /*普通参数调研*/
    a {
        @include link-colors(blue, red, green)
    }

    /*关键词参数：前面加上指定的参数名字，阅读起来会更加方便，*/
    /*当混合器被@include时:sass允许通过语法$name: value的形式指定每个参数的值*/
    a {
        @include link-colors(
                $nomal: blue,
                $visited: green,
                $hover: red
        )
    }

    /* 参数变量：不确定的参数的个数，比如阴影，可以使用  ... 来声明 ---(写在参数的后面)，这些值会被当做值列表来处理 */

    @mixin box-shadow($shadows...) {
        -moz-box-shadow: $shadows;
        -webkit-box-shadow: $shadows;
        box-shadow: $shadows;
    }

    .shadows {
        @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
    }

    /*编译为：*/
    .shadowed {
        -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
        -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
        box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    }

    /*参数变量也可以用在@include的时候，*/
    @mixin colors($text, $background, $border) {
        color: $text;
        background-color: $background;
        border-color: $border;
    }

    $values: #ff0000, #00ff00, #0000ff;

    /*@include使用*/
    .primary {
        @include colors($values...);
    }

    /*函数指令 --可以传递若干个局部变量给函数作为参数，*/
    $grid-width: 40px;
    $gutter-width: 10px;

    @function grid-width($n) {
        @return $n * $grid-width + ($n - 1) * $gutter-width;
    }

    #sidebar { width: grid-width(5); }

    /*使用关键性参数*/
    #sidebar { width: grid-width($n: 5); }


    /*编译为*/
    #sidebar {
        width: 240px; }


</style>

